<!-- D:/project/app/ydz-app-uniapp/static/images/serve -->
<template>
	<view class="pagebody">
		<view class="topbox borderbox">
			<NavHeader></NavHeader>
		</view>

		<!-- 组件1 -->
		<view class="combox" style="margin-top: -50rpx;">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					为什么要做临床招募？
				</view>
			</view>
			<view class="color303b39 fz36 mt30" style="line-height: 64rpx;">
				面对患者对前沿医疗资源的迫切需求和临床试验参与机会的稀缺性，药队长积极携手国内外医药公司与国内临床试验基地，打造了一个高效、便捷的临床招募平台。
			</view>
			<view class="justify-between flex-wrap"
				style="padding: 40rpx 16rpx;align-content: space-between;background: url(./static/images/serve/mapimg.png) no-repeat;background-size: cover;">
			<!-- 	<view class="flex-col align-center" style="width: 300rpx;">
					<view class="fz24" style="color: #576260;">
						一个高效、便捷的招募平台
					</view>
					<view class="mt25 mb25" style="width: 40rpx;height: 8rpx;border-radius: 8rpx;background: #00D9B2;">
					</view>
					<view class="fwbold" style="font-size: 56rpx;color: #00D9B2;">
						1
					</view>
				</view> -->
				<view class="flex-col align-center" style="width: 300rpx;">
					<view class="fz24" style="color: #576260;">
						500+个项目同时招募中
					</view>
					<view class="mt25 mb25" style="width: 40rpx;height: 8rpx;border-radius: 8rpx;background: #00D9B2;">
					</view>
					<view class="fwbold" style="font-size: 56rpx;color: #00D9B2;">
						500+
					</view>
				</view>
				<view class="flex-col align-center" style="width: 300rpx;">
					<view class="fz24" style="color: #576260;">
						全天候随时在线沟通
					</view>
					<view class="mt25 mb25" style="width: 40rpx;height: 8rpx;border-radius: 8rpx;background: #00D9B2;">
					</view>
					<view class="fwbold" style="font-size: 56rpx;color: #00D9B2;">
						24h
					</view>
				</view>
				<!-- <view class="flex-col align-center" style="width: 300rpx;">
					<view class="fz24" style="color: #576260;">
						一个高效、便捷的招募平台
					</view>
					<view class="mt25 mb25" style="width: 40rpx;height: 8rpx;border-radius: 8rpx;background: #00D9B2;">
					</view>
					<view class="fwbold" style="font-size: 56rpx;color: #00D9B2;">
						1
					</view>
				</view> -->
			</view>
		</view>

		<!-- 组件3 -->
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					药队长临床招募有何优势？
				</view>
			</view>
			<view class="color303b39 mt40 fz36 mb30" style="line-height: 64rpx;text-align: justified;">
				药队长不仅拥有完整的临床试验项目库，更具备专业的招募团队。团队成员有着专业医学背景，了解疾病、招募细节以及项目组合搭配等，入组成功率更高。
			</view>
			<view class="mt32 ">
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						全新希望
					</view>
				</view>
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						知名专家
					</view>
				</view>
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						免费用药
					</view>
				</view>
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						多种补贴
					</view>
				</view>

			</view>
		</view>


		<!-- 组件3 -->
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					哪些人适合参加临床招募？
				</view>
			</view>
			<view class="mt32 ">
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						经济压力大的肿瘤患者
					</view>
				</view>
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						既往方案不佳的肿瘤患者
					</view>
				</view>
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						想要尝试新疗法的慢性病患者
					</view>
				</view>
				<view class="align-center mb30"
					style="height: 72rpx;border-radius: 72rpx;padding-left: 32rpx;background: #F6FAF9;">
					<view class=""
						style="background: #00D9B2;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 16rpx;">
					</view>
					<view class="color303b39 fz32 fwbold">
						无药可用的罕见病患者
					</view>
				</view>

			</view>
		</view>
		
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					临床招募的流程有哪些？
				</view>
			</view>
			<view class="remindbox">
				<view class="process borderbox">
					<view class="processbox borderbox pos-rel" style="">
						<view class="pos-abs circular">
							1
						</view>
						<view class="fz32 fwbold" style="color: #00D9B2;line-height: 40rpx;">
							选择项目 
						</view>
						患者根据自身病情和项目入组标准，选择合适的临床试验项目。
					</view>
					<view class="processbox borderbox pos-rel" style="">
						<view class="pos-abs circular">
							2
						</view>
						<view class="fz32 fwbold" style="color: #00D9B2;line-height: 40rpx;">
							提交资料 
						</view>
						提供患者病历、病史等个人医疗资料，AI智能预筛，初步审核。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							3
						</view>
						<view class="fz32 fwbold" style="color: #00D9B2;line-height: 40rpx;">
							病例审核 
						</view>
						医学顾问详细评估受试者资料，判断是否符合入组资格条件。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							4
						</view>
						<view class="fz32 fwbold" style="color: #00D9B2;line-height: 40rpx;">
							面诊签署知情同意书 
						</view>
						详细介绍试验方案、用药及流程，了解试验风险并签署知情同意书。
					</view>
					<view class="processbox borderbox pos-rel">
						<view class="pos-abs circular">
							5
						</view>
						<view class="fz32 fwbold" style="color: #00D9B2;line-height: 40rpx;">
							筛选检查
						</view>
						安排患者接受体检和实验室检测，确认身体状况是否适合参与试验。
					</view>
					<view class="processbox borderbox pos-rel" style="padding-bottom: 0;border-left: 1rpx solid transparent;">
						<view class="pos-abs circular">
							6
						</view>
						<view class="fz32 fwbold" style="color: #00D9B2;line-height: 40rpx;">
							入组治疗
						</view>
						筛选合格后，患者正式加入试验并开始接受指定治疗方案。
					</view>
				</view>
			</view>
		</view>
		<image src="../../static/images/serve/mkd.png" class="mt16" style="width: 100%;height: 120rpx;" mode=""></image>
		
		<lyb :title="'留言板'"></lyb>
		
		<!-- 组件6 -->
		<view class="remindbox">
			<view class="align-center" style="border-bottom: 1rpx solid #D7DDDC;height: 112rpx;padding: 0 32rpx;">
				<image src="@/static/images/knowledge/mesboard/light.png"
					style="width: 27rpx;height: 36rpx;margin-right: 16rpx;" mode=""></image>
				<view class="" style="font-weight: 800;font-size: 36rpx;color: #00977C;">
					药队长温馨提示您
				</view>
			</view>
			<view class="process borderbox">
				<view class="processbox borderbox pos-rel" style="">
					<view class="pos-abs circular">
						1
					</view>
					请准确填写您的联系方式，并保持电话或联系方式畅通，以便药队长医学顾问能联系到您。
				</view>
				<view class="processbox borderbox pos-rel" style="">
					<view class="pos-abs circular">
						2
					</view>
					咨询人数较多，药队长医学顾问回复不及时，请您谅解。如果急需解决，可拨打免费电话：<a style="color: #00D9B2;"
						href="tel:400-001-2811">400-001-2811</a>；或者点击免费咨询，立刻咨询。
				</view>
				<view class="processbox borderbox pos-rel" style="padding-bottom: 0;">
					<view class="pos-abs circular">
						3
					</view>
					药队长承诺，严格保护您的个人信息。
				</view>
			</view>
		</view>
		
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					500+项目持续招募中
				</view>
			</view>
			<view class="clinitem" v-for="(item,index) in clinicalList" :key="index"  @click="toClinical(item.id)" >
				<view class="title lineclamp1">
					{{item.title}}
				</view>
				<view class="other lineclamp1">
					<span style="color: #576260;letter-spacing: 10rpx;">[适应症]</span> {{item.indications}}
				</view>
				<view class="other lineclamp1">
					<span style="color: #576260;letter-spacing: 1rpx;">[试验分期]</span> {{item.trialName}}
				</view>
			</view>
			<view class="justify-center align-center">
				<view @click="toclinicalList" class="justify-center align-center mt50" style="background: #F6FAF9;border-radius: 72rpx;color: #7E8987;width: 320rpx;height: 72rpx;">
					点击查看更多项目
				</view>
			</view>
		</view>
		
		
		

		<!-- 组件2 -->
		<view class="combox">
			<view class="flex-row align-center" style="">
				<view class="" style="width: 8rpx;height: 40rpx;border-radius: 50rpx;background: #00D9B2;">
				</view>
				<view class=" fz40 fwbold" style="margin-left: 8rpx;color: #00D9B2;">
					如何保护患者隐私和权益？
				</view>
			</view>
			<view class="card_div mt10">
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">01</view>
					<view class="title fz36">伦理委员会审查
					</view>
					<view class="cardcon">
						<view class=" fz32" style="line-height: 48rpx;">
							所有临床试验在开始前都必须经过独立的伦理委员会审查。
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">02</view>
					<view class="title fz36">知情同意书
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32" style="line-height: 48rpx;">
							患者参与临床试验前，会被要求签署知情同意书，详细说明试验的目的、过程、可能存在的风险和收益。
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">03</view>
					<view class="title fz36 ">隐私保护
					</view>
					<view class="cardcon ">
						<view class=" fz32" style="line-height: 48rpx;">
							在临床试验中，患者的个人信息和健康数据仅用于试验目的。
						</view>
					</view>
					<!-- <view class="materials_remark fz14">注：可凭患者身份证去到医院指定科室获取</view> -->
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">04</view>
					<view class="title fz36">数据匿名化或编码
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32" style="line-height: 48rpx;">
							患者的个人信息和数据在收集、存储和分析过程中会进行匿名化或编码处理，以进一步保护患者的隐私。
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 24px;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">05</view>
					<view class="title fz36">参研人员的管理和培训
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32" style="line-height: 48rpx;">
							研究者、外聘CRC等参研人员都会接受保密教育、参加保密培训、签署保密协议，尊重患者隐私。
						</view>
					</view>
				</view>
				<view class="card" style="border-left: 1rpx solid transparent;">
					<view class="bigyuan"></view>
					<view class="smayuan"></view>
					<view class="num">06</view>
					<view class="title fz36">法律保护
					</view>
					<view class="cardcon justify-start">
						<view class=" fz32" style="line-height: 48rpx;">
							《个人信息保护法》和《医学研究伦理指导原则》等法规确保患者的个人信息在整个试验过程中得到充分保护。
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 组件7 -->
		<zxkfcom></zxkfcom>


		<FixedFoot :typeid="3"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import zxkfcom from '../../components/generalcom/zxkfcom.vue';
	import lyb from '../../components/generalcom/lyb.vue';
	import {
		getClinicalList
	} from '@/api/api.js'
	import {
		getInfo
	} from '@/api/login'
	
	export default {
		components: {
			FixedFoot,
			NavHeader,
			zxkfcom,
			lyb
		},
		onLoad() {

		},
		data() {
			return {

				placeholderStyle: "color:#7E8987;font-size:32rpx;font-weight: 400;",
				textareaStyle: "color:#7E8987;font-size:32rpx;font-weight: 400;",
				leaveBoard: {
					name: '',
					tel: '',
					content: ''
				},
				clinicalList:[],
				diseaseList:[],
				disease:{}
			
			}
		},
		mounted() {
			this.getUser()
			
		},
		methods: {
			getUser() {
				getInfo().then(res => {
					this.userDocument = res.userDocument
					this.disease = { diseaseId: this.userDocument.diseaseId };  
					this.diseaseList.push(this.disease)					
					this.selectClinicalList()
				})
			},
			toclinicalList(){
				uni.navigateTo({
					url:'/pages/knowledge/diseaseClinical?id='+this.userDocument.diseaseId 
				})
			},
			toClinical(id){
				uni.navigateTo({
					url:'/pages/knowledge/clinicaldetail?id='+id
				})
			},
			selectClinicalList(){
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state": "1",
					"orderByColumn": "state DESC,create_time desc",
					"isAsc": "desc",
					"clinicalDiseaseList": this.diseaseList ? this.diseaseList : null
					
				}
				getClinicalList(param).then(res => {
					if(res.code == 200){
						this.clinicalList = res.rows
					}
				})
			},
		},
		created() {},
	}
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border {
		height: 90rpx;
		border-radius: 16rpx;
		border: 1rpx solid #D7DDDC;
	}

	::v-deep .uni-input-wrapper {
		font-size: 32rpx;
	}

	::v-deep .uni-easyinput__content-input {
		padding: 0 33rpx;
	}

	::v-deep .u-input__textarea {
		font-size: 32rpx;
		padding: 21rpx 0;
	}

	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			height: 547rpx;
			background: url('../../static/images/serve/lczmpagebg.png') no-repeat;
			background-size: cover;
			padding: 36rpx 24rpx;
		}

		.combox {
			padding: 48rpx 24rpx 56rpx;
			background: #fff;
			border-radius: 32rpx;
			margin-top: 16rpx;

			.linebox {
				background: linear-gradient(125deg, #F5FEFC 0%, #E7FCF8 100%);
				border-radius: 24rpx;
				padding: 32rpx 24rpx;

			}

			// 组件2
			.card_div {
				padding: 24rpx;
				border-radius: 24rpx;

				.card {
					border-left: 1rpx dashed #80dbe4;
					position: relative;

					.smayuan {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background: #00D9B2;
						position: absolute;
						border: 2rpx solid rgba(2, 183, 202, 0.1);
						z-index: 3;
						top: 8rpx;
						left: -8rpx;
					}

					.bigyuan {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						background-color: #e6f8fa;
						border: 4rpx solid rgba(2, 183, 202, 0.10);
						position: absolute;
						left: -16rpx;
					}

					.num {
						width: 30rpx;
						height: 24rpx;
						font-size: 36rpx;
						font-family: Microsoft YaHei-Bold, Microsoft YaHei;
						font-weight: bold;
						color: #00D9B2;
						line-height: 32rpx;
						margin-left: 24rpx;
					}

					.title {
						font-weight: bold;
						color: #303B39;
						position: absolute;
						top: -10rpx;
						left: 80rpx;
					}

					.material_title {
						color: #333333;
						position: absolute;
						top: -5rpx;
						left: 66rpx;
					}

					.cardcon {
						background: #f8f8f8;
						border-radius: 16rpx;
						padding: 16rpx 16rpx 16rpx 24rpx;
						margin-top: 32rpx;
						margin-left: 60rpx;
						font-weight: 400;
						color: #323434;
					}


					.materials_remark {
						height: 14rpx;
						font-family: Microsoft YaHei-Regular, Microsoft YaHei;
						font-weight: 400;
						color: #666666;
						line-height: 14rpx;
						margin-left: 60rpx;
						margin-top: 24rpx;
					}
				}
			}

			// 组件7
			.comcard {
				margin-bottom: 32rpx;
				width: 343rpx;
				height: 400rpx;
				background: linear-gradient(180deg, rgba(0, 255, 209, 0.1) 0%, rgba(0, 255, 209, 0) 100%);
				box-shadow: inset 0px 0px 24px 0px rgba(183, 255, 238, 0.5);
				border-radius: 24px 24px 24px 24px;
				border-image: linear-gradient(180deg, rgba(221, 253, 243, 0.5), rgba(160, 244, 229, 0.5)) 1 1;
			}
			
			.clinitem{
				margin-top: 40rpx;
				height: 200rpx;	
				background: linear-gradient( 180deg, rgba(0,217,178,0.08) 0%, rgba(0,217,178,0) 100%);
				border-radius: 24px 24px 0px 0px;
				padding: 16rpx;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #00977C;
					line-height: 64rpx;
					text-align: left;
				}
				.other{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #303B39;
					text-align: left;
					margin-top: 24rpx;
				}
			}
		}


		.remindbox {
			margin-top: 16rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 32rpx;

			.process {
				padding: 29rpx 32rpx 80rpx 50rpx;

				.processbox {
					padding: 0 20rpx 48rpx 38rpx;
					border-left: 1rpx dashed #00D9B2;
					font-weight: 500;
					font-size: 32rpx;
					color: #303B39;
					line-height: 56rpx;

					.circular {
						position: absolute;
						left: -18rpx;
						top: 0;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background: #00D9B2;
						color: #fff;
						font-size: 28rpx;
						text-align: center;
						line-height: 36rpx;
					}
				}
			}
		}

	}
</style>